<html xmlns:th="http://www.thymeleaf.org">

<nav th:fragment="topMenu(isribbon)">
    <!-- 彩带 -->
    <div th:if="${isribbon eq true}" id="awwwards" class="right black">
        <a href="#" target="_blank">best websites of the world</a>
    </div>
    <!-- END彩带 -->
    <!-- 预加载器 -->
    <div id="preloader">
        <div id="status">&nbsp;</div>
    </div>
    <!-- 顶部导航栏 -->
    <nav role="navigation" class="navbar navbar-static-top">
        <div class="container-fluid">
            <!-- 手机端的和切换分组，以更好的移动显示 -->
            <div class="navbar-header">
                <button data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" class="navbar-toggle"
                        type="button">
                    <span class="entypo-menu"></span>
                </button>
                <button class="navbar-toggle toggle-menu-mobile toggle-left" type="button">
                    <span class="entypo-list-add"></span>
                </button>


                <div id="logo-mobile" class="visible-xs">
                    <h1>用户管理<span>v2</span></h1>
                </div>

            </div>


            <!-- 右侧顶部-->
            <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <!-- 消息通知栏 -->
                    <li class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#"><i style="font-size:20px;"
                                                                                      class="icon-conversation"></i>
                            <div class="noft-red">23</div>
                        </a>
                        <ul style="margin: 11px 0 0 9px;" role="menu" class="dropdown-menu dropdown-wrap">
                            <li>
                                <a href="#">
                                    <img alt="" class="img-msg img-circle"
                                         th:src="@{{path}/static/admin/portraits/thumb/men/1.jpg(path=${rootPath})}">Jhon
                                    Doe <b>Just Now</b>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">
                                    <img alt="" class="img-msg img-circle"
                                         th:src="@{{path}/static/admin/portraits/thumb/women/1.jpg(path=${rootPath})} ">Jeniffer
                                    <b>3 Min Ago</b>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">
                                    <img alt="" class="img-msg img-circle"
                                         th:src="@{{path}/static/admin/portraits/thumb/men/2.jpg(path=${rootPath})}">Dave
                                    <b>2 Hours Ago</b>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">
                                    <img alt="" class="img-msg img-circle"
                                         th:src="@{{path}/static/admin/portraits/thumb/men/3.jpg(path=${rootPath})}"><i>Keanu</i>
                                    <b>1 Day Ago</b>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">
                                    <img alt="" class="img-msg img-circle"
                                         th:src="@{{path}/static/admin/portraits/thumb/men/4.jpg(path=${rootPath})}"><i>Masashi</i>
                                    <b>2 Mounth Ago</b>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <div>See All Messege</div>
                            </li>
                        </ul>
                    </li>
                    <!-- END消息通知栏 -->
                    <!-- 右边警告图标通知栏 -->
                    <li>

                        <a data-toggle="dropdown" class="dropdown-toggle" href="#"><i style="font-size:19px;"
                                                                                      class="icon-warning tooltitle"></i>
                            <div class="noft-green">5</div>
                        </a>
                        <ul style="margin: 12px 0 0 0;" role="menu" class="dropdown-menu dropdown-wrap">
                            <li>
                                <a href="#">
                                    <span style="background:#DF2135" class="noft-icon maki-bus"></span><i>From
                                    Station</i> <b>01B</b>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">
                                    <span style="background:#AB6DB0" class="noft-icon maki-ferry"></span><i>Departing
                                    at</i> <b>9:00 AM</b>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">
                                    <span style="background:#FFA200" class="noft-icon maki-aboveground-rail"></span><i>Delay
                                    for</i> <b>09 Min</b>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">
                                    <span style="background:#86C440" class="noft-icon maki-airport"></span><i>Take
                                    of</i> <b>08:30 AM</b>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">
                                    <span style="background:#0DB8DF" class="noft-icon maki-bicycle"></span><i>Take
                                    of</i> <b>08:30 AM</b>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <div>See All Notification</div>
                            </li>
                        </ul>
                    </li>
                    <!--END 右边警告图标通知栏 -->

                    <!-- 右边帮助图标通知栏  -->
                    <li><a href="#"><i data-toggle="tooltip" data-placement="bottom" title="Help"
                                       style="font-size:20px;" class="icon-help tooltitle"></i></a>
                    </li>
                    <!-- END右边帮助图标通知栏  -->
                </ul>
                <!-- 右侧顶部 日期 时间  天气预报  div-->
                <div id="nt-title-container" class="navbar-left running-text visible-lg">
                    <!-- 日期空间 -->
                    <ul class="date-top">
                        <li class="entypo-calendar" style="margin-right:5px"></li>
                        <li id="Date"></li>
                    </ul>
                    <!--end 日期空间 -->
                    <!-- 时间DIV -->
                    <ul id="digital-clock" class="digital">
                        <li class="entypo-clock" style="margin-right:5px"></li>
                        <li class="hour"></li>
                        <li>:</li>
                        <li class="min"></li>
                        <li>:</li>
                        <li class="sec"></li>
                        <li class="meridiem"></li>
                    </ul>
                    <!--end 时间DIV -->
                    <!-- 天气预报div -->
                    <ul id="nt-title">
                        <li><i class="wi-day-lightning"></i>&#160;&#160;Berlin&#160;
                            <b>85</b><i class="wi-fahrenheit"></i>&#160;; 15km/h
                        </li>
                        <li><i class="wi-day-lightning"></i>&#160;&#160;Yogyakarta&#160;
                            <b>85</b><i class="wi-fahrenheit"></i>&#160;; Tonight- 72 °F (22.2 °C)
                        </li>

                        <li><i class="wi-day-lightning"></i>&#160;&#160;Sttugart&#160;
                            <b>85</b><i class="wi-fahrenheit"></i>&#160;; 15km/h
                        </li>

                        <li><i class="wi-day-lightning"></i>&#160;&#160;Muchen&#160;
                            <b>85</b><i class="wi-fahrenheit"></i>&#160;; 15km/h
                        </li>

                        <li><i class="wi-day-lightning"></i>&#160;&#160;Frankurt&#160;
                            <b>85</b><i class="wi-fahrenheit"></i>&#160;; 15km/h
                        </li>

                    </ul>
                    <!--end 天气预报div -->
                </div>
                <!-- end 右侧顶部 日期 时间  天气预报 -->

                <!-- 右侧顶部 头像设置-->
                <ul style="margin-right:0;" class="nav navbar-nav navbar-right">
                    <!-- 头像设置 -->
                    <li>
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <img alt="" class="admin-pic img-circle"
                                 th:src="@{{path}/static/admin/portraits/thumb/men/10.jpg(path=${rootPath})}"><span
                                th:text="${'Hi,'+session.sessionUserName}"></span><b class="caret"></b>
                        </a>
                        <ul style="margin-top:14px;" role="menu" class="dropdown-setting dropdown-menu">
                            <li>
                                <a href="#">
                                    <span class="entypo-user"></span>&#160;&#160;My Profile</a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="entypo-vcard"></span>&#160;&#160;Account Setting</a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="entypo-lifebuoy"></span>&#160;&#160;Help</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a th:href="@{/Loginout}">
                                    <span class="entypo-basket"></span>&#160;&#160; 退出</a>
                            </li>
                        </ul>
                    </li>
                    <!-- END头像设置 -->
                    <!-- 背景设置 -->
                    <li>
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <span class="icon-gear"></span>&#160;&#160;设置</a>
                        <ul role="menu" class="dropdown-setting dropdown-menu">

                            <li class="theme-bg">
                                <div id="button-bg"></div>
                                <div id="button-bg2"></div>
                                <div id="button-bg3"></div>
                                <div id="button-bg5"></div>
                                <div id="button-bg6"></div>
                                <div id="button-bg7"></div>
                                <div id="button-bg8"></div>
                                <div id="button-bg9"></div>
                                <div id="button-bg10"></div>
                                <div id="button-bg11"></div>
                                <div id="button-bg12"></div>
                                <div id="button-bg13"></div>
                            </li>
                        </ul>
                    </li>
                    <!--END 背景设置 -->

                    <!-- 顶部右侧隐藏按钮 -->
                    <li class="hidden-xs">
                        <a class="toggle-left" href="#">
                            <span style="font-size:20px;" class="entypo-list-add"></span>
                        </a>
                    </li>
                    <!-- END顶部右侧隐藏按钮 -->
                </ul>
                <!-- end 右侧顶部 头像设置-->
            </div>
            <!-- end 右侧顶部 -->
        </div>
    </nav>
    <!-- /结束顶部导航条 -->
</nav>